<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Demo</title>
</head>
<body>
<h1>WebSocket Demo</h1>

<script>
    const socket = new WebSocket('ws://localhost:8080/ws');

    socket.onopen = function(event) {
        console.log('WebSocket connection opened:', event);
    };

    socket.onmessage = function(event) {
        console.log('Received message:', event.data);
    };

    socket.onclose = function(event) {
        console.log('WebSocket connection closed:', event);
    };

    function sendMessage() {
        const message = document.getElementById('message').value;
        const targetUser = document.getElementById('targetUser').value;

        const fullMessage = `${targetUser}:${message}`;
        socket.send(fullMessage);
    }
</script>

<div>
    <label for="targetUser">Target User:</label>
    <input type="text" id="targetUser" />
</div>

<div>
    <label for="message">Message:</label>
    <input type="text" id="message" />
</div>

<button onclick="sendMessage()">Send Message</button>
</body>
</html>
